<script setup lang="ts">
    import textImg from '@img/home/bjt.jpg'
    import addForm from '@/views/component/ComponentLibrary/component/addForm.vue'
    defineProps({

    })
    const commonDialog = ref()
    const CarList = reactive([{
        // 组件名字
        name:'flex卡片布局',
        // 最近更新时间
        updataTime:'2023:12:09 18:16:00',
        // 示例图片
        img: '',
        // 创建者
        create:'Ciwei',
    }])
const searchQuery = reactive({
    component:''
})
    function search() {
        console.log('执行搜索框')
    }
    function doChange(e,ee,eee) {
        console.log(e,ee,eee)
    }
    function add() {
       commonDialog.value.init(addForm,'22','Add')
    }
</script>
<template>
    <CommonBackBox>
        <template #heard="data">
            <SearchQuery :leftSpan="18" :rightSpan="6" @search="search">
                <template #left="data">
                    <el-input v-model="searchQuery.component" placeholder="请输入组件名字" clearable />
                </template>
                <template #right="data">
                    <CommonBtn label="新增" iconClass="add" @click="add"></CommonBtn>
                </template>
            </SearchQuery>
        </template>
        <div class="body">
            <CommonFlexCard :list="CarList">
                <template #box="{data}">
                    <div class="card-box">
                            <el-image class="img" :src="textImg" fit="cover" />
                        <div class="title">
                            <div class="label">{{data.name}}</div>
                            <div class="create">创建者：{{data.create}}</div>
                        </div>
                    </div>
                </template>
            </CommonFlexCard>
        </div>
    </CommonBackBox>
    <CommonDialog ref="commonDialog" @doChange="doChange">
    </CommonDialog>
</template>
<style lang="scss" scoped>
    .body{
        height: 100%;
        width: 100%;
        padding-top: 20px;
        .card-box{
            color: #1a1a1a;
            height: 100%;
            width: 100%;
            border: 3px solid #c7c9dd;
            border-radius: 12px;
            padding: 14px;
            .title{
                height: 24px;
                font-weight: bold;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .create{
                    font-size: 12px;
                    color: #409eff;
                }
            }
            .img{
                width: 100%;
                height: calc(100% - 24px);
            }
        }
        .card-box:hover{
            border: 3px solid #6771d1;
        }
    }
</style>
